<script setup lang="ts">
  import { computed, reactive } from 'vue';
  import { $t } from '@/locales';
  import { loginModuleRecord } from '@/constants/app';
  import { useRouterPush } from '@/hooks/common/router';
  import { useFormRules, useNaiveForm } from '@/hooks/common/form';
  import { useAuthStore } from '@/store/modules/auth';
  // import {requestTencentCaptcha} from '@/utils/tencentCaptcha';
  defineOptions({
    name: 'PwdLogin',
  });

  const authStore = useAuthStore();
  const { toggleLoginModule } = useRouterPush();
  const { formRef, validate } = useNaiveForm();

  interface FormModel {
    userName: string;
    password: string;
  }

  const model: FormModel = reactive({
    userName: '',
    password: '',
  });

  const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
    // inside computed to make locale reactive, if not apply i18n, you can define it without computed
    const { formRules } = useFormRules();

    return {
      userName: formRules.userName,
      password: formRules.pwd,
    };
  });

  async function handleSubmit() {
    await validate();
    // requestTencentCaptcha('198269024', async (res: any) => {
    //   if (res.error) {
    //     return;
    //   }

    //   const result = await authStore.login(model.userName, model.password);
    // });
    const result = await authStore.login(model.userName, model.password);
    // await authStore.login(model.userName, model.password);
  }

  type AccountKey = 'super' | 'admin' | 'user';

  interface Account {
    key: AccountKey;
    label: string;
    userName: string;
    password: string;
    tcr: any;
  }

  const accounts = computed<Account[]>(() => [
    {
      key: 'super',
      label: $t('page.login.pwdLogin.superAdmin'),
      userName: 'Super',
      password: '123456',
      tcr: {},
    },
    {
      key: 'admin',
      label: $t('page.login.pwdLogin.admin'),
      userName: 'Admin',
      password: '123456',
      tcr: {},
    },
    {
      key: 'user',
      label: $t('page.login.pwdLogin.user'),
      userName: 'User',
      password: '123456',
      tcr: {},
    },
  ]);

  async function handleAccountLogin(account: Account) {
    // await authStore.login(account.userName, account.password);
  }
</script>

<template>
  <NForm
    ref="formRef"
    :model="model"
    :rules="rules"
    size="large"
    :show-label="false"
  >
    <NFormItem path="userName">
      <NInput
        v-model:value="model.userName"
        class="pwd-input"
        :placeholder="$t('page.login.common.userNamePlaceholder')"
      />
    </NFormItem>
    <NFormItem path="password">
      <NInput
        v-model:value="model.password"
        type="password"
        show-password-on="click"
        class="pwd-input"
        :placeholder="$t('page.login.common.passwordPlaceholder')"
      />
    </NFormItem>
    <NSpace vertical :size="24">
      <div class="flex-y-center justify-between">
        <NCheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
        <!--
 <NButton quaternary @click="toggleLoginModule('reset-pwd')">
          {{ $t('page.login.pwdLogin.forgetPassword') }}
        </NButton>
-->
      </div>
      <NButton
        type="primary"
        size="large"
        round
        block
        :loading="authStore.loginLoading"
        @click="handleSubmit"
      >
        {{ $t('common.confirm') }}
      </NButton>
      <!--
 <div class="flex-y-center justify-between gap-12px">
        <NButton class="flex-1" block @click="toggleLoginModule('code-login')">
          {{ $t(loginModuleRecord['code-login']) }}
        </NButton>
        <NButton class="flex-1" block @click="toggleLoginModule('register')">
          {{ $t(loginModuleRecord.register) }}
        </NButton>
      </div>
-->
      <!--
 <NDivider class="text-14px text-#666 !m-0">{{ $t('page.login.pwdLogin.otherAccountLogin') }}</NDivider>
      <div class="flex-center gap-12px">
        <NButton v-for="item in accounts" :key="item.key" type="primary" @click="handleAccountLogin(item)">
          {{ item.label }}
        </NButton>
      </div>
-->
    </NSpace>
  </NForm>
</template>

<style scoped></style>
